<template>
    <div v-if="initList.tbMnUser" class="setting-boxx">
        <!-- <heade-return :title-params="topname"></heade-return> -->
        <div class="binding-return">
            <i @click="playbindingreturn()" class="bindingticon iconfont icon-jiantou"></i>
            <span style="position: absolute;left: calc(50% - 16px);">设置</span>
        </div>
        <div class="setting-box">
            <div class="setting-header">
                <div class="setting-header-left">用户头像</div>
                <div class="setting-header-right">
                    <img v-if="initList.tbMnUser" :src="initList.tbMnUser.avater">
                    <img v-else src="../../assets/img/personal-img-head@2x.png">
                </div>
            </div>
            <div class="setting-header" @click="flexname(0)">
                <div class="setting-header-left">用户名</div>
                <div class="setting-header-right">{{initList.tbMnUser.userName}} <i
                        class="iconset iconfont icon-iconfontyoujiantou"></i></div>
            </div>
            <div class="setting-header" @click="flexname(1)">
                <div class="setting-header-left">手机号</div>
                <div class="setting-header-right">{{initList.tbMnUser.phone}} <i
                        class="iconset iconfont icon-iconfontyoujiantou"></i></div>
            </div>
            <div class="setting-header" @click="flexname(2)">
                <div class="setting-header-left">支付密码</div>
                <div class="setting-header-right">
                    <span v-if="initList.tbMnUser.hasPayPwd == 0">添加</span>
                    <span v-else>修改</span>
                     <i class="iconset iconfont icon-iconfontyoujiantou"></i></div>
            </div>
        </div>
        <div style="height: 8px; width: 100% ;background:rgba(237,237,237,1);"></div>
        <div class="setting-box">
            <div class="setting-header">
                <div class="setting-header-left">微信账号</div>
                <div class="setting-header-right" @click="show = true">
                    <span v-if="initList.tbMnUser.weixin">{{initList.tbMnUser.weixin}}</span>
                    <span v-else>绑定账号</span>
                    <i class="iconset iconfont icon-iconfontyoujiantou"></i>
                </div>
            </div>
            <!-- <div class="setting-header">
                <div class="setting-header-left">淘宝账号 </div>
                <div class="setting-header-right">18888888888 <i class="iconset iconfont icon-iconfontyoujiantou"></i></div>
            </div> -->
        </div>
        <div style="height: 8px; width: 100% ;background:rgba(237,237,237,1);"></div>
        <div class="setting-box">
            <div class="setting-header">
                <div class="setting-header-left">消息推送</div>
                <div class="setting-header-right" @click="mesagePush" style="position: relative">
                    <van-switch style="right: 0;top: 10px;" v-model="checked" active-color="#FF2E67" size="24px" />
                </div>
            </div>
            <div class="setting-header">
                <div class="setting-header-left">清除缓存 </div>
                <div class="setting-header-right">
                    <span @click="deleSave"
                        style="font-size: 10px;border:1px solid #ff2e67;padding:3px 7px;border-radius: 12px;">清除缓存</span>
                </div>
            </div>
            <div class="setting-header">
                <div class="setting-header-left">关于我们 </div>
                <div class="setting-header-right">V1.0</div>
            </div>
        </div>
        <van-overlay :show="show" @click="show = false">
            <div class="wrapper">
                <div style="font-size: 16px;font-weight: bold;">微信号绑定</div>
                <div style="margin: 35px 0 50px 0;" @click.stop>
                    <input style="border:none;border-bottom: 1px solid #d8d5d5;" v-model="wechatVal" type="text">
                </div>
                <div>
                    <van-button size="small" @click.stop="subWechat" color="#ff2e67">提交</van-button>
                </div>
            </div>
        </van-overlay>
        <div style="width:100%;color:#FF2E67;text-align: center;position: absolute;bottom: 100px;">
            《用户协议》 | 《隐私协议》
            <!-- <div style="font-size: 10px;margin-top:5px;color:#818181;">京ICP备20019534号-1</div> -->
        </div>
        <div class="setting-btn" @click="logOut">退出登录</div>
    </div>
</template>

<script>
    import headeReturn from "../public/head"
    import { Overlay, Button, Toast } from 'vant';
    export default {
        name: "Stting",
        components: {
            headeReturn: headeReturn,
            [Overlay.name]: Overlay,
            [Button.name]: Button,
        },
        data() {
            return {
                wechatVal: "",
                checked: true,
                userId: "",
                initList: {},
                show: false
            }
        },
        mounted() {
            this.userId = localStorage.getItem('user_id');
            this.initData();
        },
        methods: {
            //清除缓存
            deleSave() {
                Toast('清除成功')
            },
            playbindingreturn() {
                this.$router.push('/personalCenter');
            },
            subWechat() {
                if (!this.wechatVal) {
                    Toast('微信号不能为空')
                } else {
                    this.$http.post(this.utils.config + "/netmall/app/person/api/bindingWeixin?id=" + this.userId + "&weixin=" + this.wechatVal).then((data) => {
                        if (data.data.success) {
                            Toast(data.data.message);
                            this.show = false;
                            this.initData();
                        }
                    })
                }
            },
            mesagePush() {
                var state;
                if (this.checked) {
                    state = 0;
                } else {
                    state = 1;
                }
                this.$http.post(this.utils.config + "/netmall/app/person/api/updatePushMsgState?user_id=" + this.userId + "&pushMsgState=" + state).then((data) => {
                    if (data.data.success) {
                        Toast(data.data.message);
                    }
                })
            },
            flexname(num) {
                var val;
                if (num == 0) {
                    val = "userName";
                }
                if (num == 1) {
                    val = "phoneName";
                }
                if (num == 2) {
                    val = "payPassword"+this.initList.tbMnUser.hasPayPwd;
                }
                this.$router.push({
                    path: `/usernameflex/${val}`
                })
            },
            initData() {
                this.$http.post(this.utils.config + "/netmall/app/person/api/getPersonCenterData?user_id=" + this.userId, { user_id: this.userId }).then((data) => {
                    this.initList = data.data.result;
                })
            },
            logOut() {
                this.$http.post(this.utils.config + "/netmall/app/person/api/logout?user_id=" + this.userId).then((data) => {
                    if (data.data.success) {
                        localStorage.clear();
                        this.$router.push('/login');
                    }
                })
            }
        }
    }
</script>

<style scoped>
    @import url("../../assets/font/iconfont.css");

    .binding-return {
        width: 100%;
        padding: 12px 10px 0 10px;
        height: 56px;
        text-align: center;
        position: relative;
        display: flex;
        justify-content: space-between;
        background: #FFFFFF;
    }

    .binding-return span {
        display: block;
        font-size: 16px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: rgba(51, 51, 51, 1);
        line-height: 22px;

    }

    .wrapper {
        position: absolute;
        text-align: center;
        width: 60%;
        left: 20%;
        top: 200px;
        background-color: #fff;
        height: 200px;
        border-radius: 20px;
        padding: 20px;
    }

    .iconset {
        font-size: 14px;
        color: #cccccc;
    }

    .setting-boxx {
        background: rgba(255, 255, 255, 1);
        min-height: 100%;
        width: 100%;
    }

    .setting-box {
        padding: 0 10px;
    }

    .setting-header {
        height: 59px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        width: 100%;
    }

    .setting-header-left {
        float: left;
        font-size: 14px;
        width: 40%;
        font-family: SourceHanSansSC-Regular, SourceHanSansSC;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 59px;
        margin-left: 5px;
    }

    .setting-header-right {
        float: right;
        width: 50%;
        font-size: 14px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: rgba(136, 136, 136, 1);
        line-height: 59px;
        margin-right: 5px;
        text-align: right;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .setting-header-right img {
        display: inline-block;
        margin-top: 12px;
        width: 36px;
        height: 36px;
        border-radius: 36px;
    }

    .setting-btn {
        width: 90%;
        height: 45px;
        background: linear-gradient(90deg, rgba(255, 90, 160, 1) 0%, rgba(255, 46, 103, 1) 100%);
        border-radius: 4px;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        line-height: 45px;
        text-align: center;
        position: fixed;
        bottom: 25px;
        left: 0;
        right: 0;
        margin: auto;
    }
</style>